import React,{useEffect, useState} from 'react';
import {View,TouchableOpacity,StyleSheet,ScrollView,Text,Image} from 'react-native';
import '../../global';
import Swiper from 'react-native-swiper';

const Btn = ({...rest})=>{
    return(
      <View style={styles.btn}>
        <TouchableOpacity {...rest}>
          <Text style={styles.text}>立即体验</Text>
        </TouchableOpacity>
      </View>
    )
} 

const Start = ({navigation}) => {
  return (
    <View style={{width:'100%',height:'100%'}}>
        <Swiper 
            style={styles.wrapper} 
            showsButtons={false}
            loop={false}
            autoplay={true}
            onIndexChanged={(index)=>{}}
        >
            <View style={styles.slide}>
                <Image source={require('../../assets/image/1.jpg')} style={{width:'100%',height:'100%'}} />
            </View>
            <View style={styles.slide}>
                <Image source={require('../../assets/image/2.jpg')} style={{width:'100%',height:'100%'}} resizeMode='stretch'/>
                <Btn onPress={()=>{navigation.navigate('Root')}}></Btn>
            </View>
        </Swiper>
    </View>
  )
}

const styles = StyleSheet.create({
    slide:{
      flex:1
    },
    btn:{
      width:changeW(300),
      position:'absolute',
      height:changeH(100),
      backgroundColor:'rgba(0,0,0,0.6)',
      bottom:changeH(250),
      left:changeW(230),
      borderRadius:25
    },
    text:{
      textAlign:'center',
      lineHeight:changeH(100),
      color:'white',
      fontSize:changeW(30)
    }
})

export default Start